<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">声音类型识别</h2>
    <br><br>

    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <!--<button mat-raised-button (click)="genTestImage()" [disabled]="sending">-->
                <!--生成随机测试图像-->
            <!--</button>-->
            <!--&nbsp;&nbsp;&nbsp;&nbsp;或&nbsp;&nbsp;&nbsp;&nbsp;-->
            <input type="file" ng2FileSelect [uploader]="fileSelector" accept=".wav, audio/*" [disabled]="sending" />
            <br>
            <!--<div>-->
                <!--<audio src="{{selectedImgDataUrl}}" alt=""></audio>-->
                <!--<a href="app/audio-classifier/birds1.wav">Play Sound</a>-->

                <!--<script src="http://mediaplayer.yahoo.com/latest"></script>-->

                <!--<audio controls>-->

                    <!--<source src="birds1.wav" type="audio/wav">-->

                    <!--<source src="horse.ogg" type="audio/ogg">-->

                    <!--Your browser does not support this audio format.-->

                <!--</audio>-->

                <!--<object height="50" width="100" data="/home/xu/ucumos/udemo/src/main/webapp/app/audio-classifier/birds1.wav"></object>-->
            <!--</div>-->
        </mat-card>
    </div>
    <div class="row justify-content-center">
        <mat-card style="width: 90%; margin-top: 20px">
            <div *ngIf="results.length > 0 && !sending">
                <p *ngFor="let result of results">
                    {{result[1]}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可能性：{{(result[2] * 100).toFixed(1)}}%
                </p>
            </div>
            <p *ngIf="results.length < 1 && !sending">识别结果</p>
            <p *ngIf="sending">正在努力识别...</p>
            <mat-spinner *ngIf="sending"></mat-spinner>
            <p *ngIf="error">出错啦...</p>
        </mat-card>
    </div>
</mat-card>
